/*version: panelistic 3.0 for Electron apps*/
/*author: cotzhang@github*/

* {
	transition: 0.2s;
}

@font-face {
	font-family: 'misans';
	src: url(./font/misans.ttf);
}


html {
	height: 100%;
}

body {
	margin: 0px;
	top: 0px;
	width: 100%;
	bottom: 0px;
	position: absolute;
	font-family: "misans";
	font-weight: normal;
	user-select: none;
	overflow: hidden;
	background-color: #0000;
}

::selection {
	background: #aacccc88;
}

#panelistic_blur {
	z-index: 999998;
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	backdrop-filter: blur(10px);
	background-color: #00000044;
}

.panelistic_popup {
	background-color: #ffffffaa;
	position: absolute;
	backdrop-filter: blur(8px);
	width: 320px;
	/*max-height: 80%;*/
	margin: auto;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.2);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.panelistic_popup_title {
	font-size: 18px;
	font-weight: bold;
}

.panelistic_popup_content {
	font-size: 14px;
	padding-top: 36px;
	position: relative;
}

.panelistic_popup_layout {
	text-align: left;
}

#panelistic_window {
	margin: 0px;
	height: 100%;
	width: 100%;
	bottom: 0px;
	position: absolute;
	color: black;
}

#panelistic_titlebar {
	height: 20px;
	-webkit-app-region: drag;
	padding-top: 6px;
	padding-bottom: 4px;
	padding-left: 8px;
	font-size: 14px;
	z-index: 999999;
}

.panelistic_controlbtn {
	position: absolute;
	top: 0px;
	filter: invert(100%);
	-webkit-app-region: none;
	z-index: 1000000;
}

#controlbtn_closebtn {
	right: 0px;
}

#controlbtn_closebtn:hover {
	filter: invert(0%);
	background-color: #ff0000;
}

#controlbtn_closebtn:active {
	filter: invert(0%);
	background-color: #ff6666;
}

#controlbtn_minbtn:hover {
	background-color: #111;
}

#controlbtn_minbtn:active {
	background-color: #222;
}

#panelistic_blur {
	position: absolute;
	z-index: 999999;
	visibility: hidden;
}

#controlbtn_minbtn {
	right: 45px;
}

#panelistic_content {
	padding: 0px;
	height: 100%;
	overflow: auto;
}

#panelistic_content_sidebar_in {
	padding: 8px;
	height: calc(100% - 16px);
	overflow: auto;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background-color: #88888855;
}

::-webkit-scrollbar-track {
	background-color: #00000000;
}

::-webkit-scrollbar-thumb:horizontal {
	background-color: #88888855;
}

::-webkit-scrollbar-track:horizontal {
	background-color: #00000000;
}

::-webkit-scrollbar-corner {
	background-color: #00000000;
}

h1 {
	font-family: "misans";
	margin: 0px;
	margin-top: 8px;
	z-index: 1;
}

h6 {
	margin: 0px;
	margin-left: 2px;
	font-weight: normal;
	font-size: 12px;
}

input,
textarea,
.btn {
	outline: none;
	border: 1px solid #cccccc99;
	background-color: #ffffff88;
	border-radius: 8px;
	padding: 9px;
	margin: 0px;
	font-family: "misans";
}

textarea {
	max-width: calc(100% - 20px);
}

.panelistic_checkbox {
	outline: none;
	border: 1px solid #cccccc99;
	background-color: #ffffff88;
	border-radius: 8px;
	padding: 8px;
	padding-top: 5px;
	margin: 0px;
	font-family: "misans";
}

.panelistic_checkbox input {
	margin-top: 5px;
}

.panelistic_checkbox_text {
	padding-left: 7px;
	font-size: 13px;
	position: relative;
	top: -1px;
}

.panelistic_panel_name {
	background-color: #ffffffbb;
	padding: 2px;
	padding-left: 12px;
	padding-right: 8px;
	margin-left: -8px;
	font-size: 14px;
	margin-top: 2px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	width: auto;
	float: left;
}

.panelistic_dialog_input {
	display: block;
	width: calc(100% - 20px);
}

.panelistic_checkbox:hover {
	border: 1px solid #bbbbbb99;
	background-color: #eeeeee88;
}

.panelistic_checkbox:active {
	border: 1px solid #aaaaaa99;
	background-color: #cccccc88;
}

input:hover,
textarea:hover,
.btn:hover {
	border: 1px solid #bbbbbb99;
	background-color: #eeeeee88;
}

.btn_sel:hover {
	background-color: #22a6;
}

.btn_cor:hover {
	background-color: #2a26;
}

.btn_err:hover {
	background-color: #a226;
}

.mobCapture:hover {
	background-color: #22a6;
}

input:active,
textarea:active,
.btn:active {
	border: 1px solid #aaaaaa99;
	background-color: #cccccc88;
}

.btn_cor:active {
	background-color: #1916;
}

.btn_sel:active {
	background-color: #1196;
}

.btn_err:active {
	background-color: #9116;
}

.mobCapture:active {
	background-color: #1196;
}

input[type="button"],
.btn {
	cursor: pointer;
}

img:not(.panelistic_controlbtn) {
	border-radius: 8px;
}

.panelistic_panel:hover {
	box-shadow: 0 0 10px #00000022;
}

.panelistic_panel:active {
	background-color: #ffffff55;
}

select {
	outline: none;
	padding: 8px;
	border-radius: 8px;
	border: 1px solid #cccccc99;
	background-color: #ffffff88;
	font-family: "misans";
}

select:hover {
	border: 1px solid #bbbbbb99;
	background-color: #eeeeee88;
}

select:active {
	border: 1px solid #aaaaaa99;
	background-color: #cccccc88;
}

select option {
	color: black;
	background-color: #ffffff88;
	font-family: "misans";
}

.panelistic_placeholder {
	height: 8px;
	position: relative;
	display: block;
}

.panelistic_placeholder_large {
	height: 12px;
	position: relative;
	display: block;
}

.panelistic_code {
	background-color: #303841;
	border-radius: 8px;
	padding: 8px;
	color: white;
	user-select: text;
}

.panelistic_panel {
	background-color: #ffffff66;
	padding: 8px;
	border-radius: 10px;
	border: solid 1px #ffffff00;
}

.btn {
	display: inline-block;
}

.btn_cor {
	background-color: #3a36;
}

.btn_sel {
	background-color: #33a6;
}

.btn_err {
	background-color: #a336;
}

.mobCapture {
	background-color: #33a6;
}

@media (prefers-color-scheme: dark) {
	#panelistic_window {
		color: white;
	}

	.panelistic_controlbtn {
		filter: invert(0%);
	}

	#controlbtn_minbtn:active {
		background-color: #888;
	}

	input,
	select,
	.panelistic_checkbox,
	.btn,
	textarea {
		border: 1px solid #44444499;
		background-color: #33333388;
		color: white;
	}

	h1,
	h6,
	span {
		color: white;
	}

	.btn_sel {
		background-color: #3396;
	}

	.btn_cor {
		background-color: #3936;
	}

	.btn_err {
		background-color: #9336;
	}

	.mobCapture {
		background-color: #3396;
	}

	.panelistic_panel {
		background-color: #44444455;
	}

	.panelistic_panel:hover {
		box-shadow: 0 0 10px #00000022;
	}

	.panelistic_panel:active {
		background-color: #66666655;
	}

	input:hover,
	select:hover,
	.panelistic_checkbox:hover,
	.btn:hover,
	textarea:hover {
		background-color: #33333388;
	}

	.btn_cor:hover {
		background-color: #1716;
	}

	.btn_sel:hover {
		background-color: #1176;
	}

	.btn_err:hover {
		background-color: #7116;
	}

	.mobCapture:hover {
		background-color: #1176;
	}

	input:active,
	select:active,
	.panelistic_checkbox:active,
	.btn:active,
	textarea:active {
		background-color: #66666655;
	}

	.btn_cor:active {
		background-color: #0606;
	}

	.btn_err:active {
		background-color: #6006;
	}

	.btn_sel:active {
		background-color: #0066;
	}

	.mobCapture:active {
		background-color: #0066;
	}

	#panelistic_content_sidebar {
		background-color: #33333333 !important;
	}

	.DM_fontsmall {
		color: #ddd !important;
	}

	.DM_fonttitlel {
		color: #fff !important;
	}

	.panelistic_panel_name {
		color: white;
		background-color: #444444aa !important;
	}

	a {
		color: #ccf !important;
	}

	.panelistic_popup {
		color: white !important;
		background-color: #444444cc;
	}
}

/* sidebar addon */


#panelistic_content_sidebar {
	height: 100%;
	position: absolute;
	display: inline-block;
	width: calc(100% - 200px);
	background-color: #ffffff33;
	vertical-align: top;
	left: 200px;
}


#panelistic_sidebar {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 200px;
	height: calc(100% - 30px);
	display: inline-block;
	vertical-align: top;
}

.panelistic_sidebar_selection {
	background-color: #eeeeee33;
	padding: 9px;
	font-size: 14px;
	vertical-align: middle;
}

.panelistic_sidebar_selection:hover {
	background-color: #eeeeee66;
}

.panelistic_sidebar_selection:active {
	background-color: #eeeeee99;
	/*padding: 8px;*/
}

.panelistic_sidebar_selection_selected {
	background-color: # !important;
}

.panelistic_sidebar_placeholder {
	height: 16px;
	position: relative;
	display: block;
}

.panelistic_sidebar_title {
	margin: 8px;
	margin-bottom: 4px;
	font-weight: bold;
	font-size: 22px;
}

.panelistic_sidebar_subtitle {
	margin: 8px;
	font-size: 14px;
	margin-top: 0px;
}

webview {
	min-height: 100%;
	min-width: 100%;
	display: inline-flex;
	/* iframes are inline by default */
	border: none;
	/* Reset default border */
	height: 100%;
	/* Viewport-relative units */
	width: 100%;
}

.panelistic_panel_dlct {
	margin: 3px;
}

.fx {
	position: fixed;
}